<template>
	<view>
		<view class="grid">
			<!-- <view class="grid-c-06" v-for="item in list" :key="item.id">
				<view class="panel">
					<image class="card-img card-list2-img" :src="item.photoUrl"></image>
					<text class="card-num-view card-list2-num-view">{{item.totalCollect}}⭐</text>
					<view class="card-bottm row">
						<view class="car-title-view row">
							<text class="card-title card-list2-title">{{item.title}}</text>
						</view>
						<view @click.stop="collect(item)" class="card-collect-view"></view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
				@change="change">
				<swiper-item v-for="(item, index) in list" :key="index">
					<image :src="item.photoUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view style="padding-top: 30rpx;width: 92%;margin: 0 auto;">
			<view style="font-size: 36rpx;">标题：{{listObj.title}}</view>
			<view style="padding-top: 30rpx;">收藏数量：{{listObj.totalCollect}}⭐</view>
			<view @click="collect" style="margin-top: 30rpx;background: rgb(31, 79, 214);color: #fff;width: 140rpx;height: 60rpx;text-align: center;line-height: 60rpx;border-radius: 16rpx;">收藏</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refreshing: false,
				loadMoreText: "加载中...",
				list: [],
				id: 0,
				fetchPageNum: 1,
				listObj: {}
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: "专题：" + e.title
			})
			this.id = e.id;
			setTimeout(() => { //防止app里由于渲染导致转场动画卡顿
				this.getData();
			}, 300)
		},
		onReachBottom() {
			console.log("滑动到页面底部")
			this.getData();
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			this.refreshing = true;
			this.getData();
		},
		methods: {
			change(e) {
				console.log('eeeeeeee', e.detail.current)
				this.listObj = this.list[e.detail.current]
			},
			getData(e) {
				uni.request({
					url: this.$serverUrl + 'photoListByTag',
					method: 'POST',
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					data: {
						'pageSize': 10,
						'pageCurrent': this.fetchPageNum,
						'id': this.id
					},
					success: (ret) => {
						if (ret.statusCode !== 200) {
							console.log("请求失败", ret)
						} else {
							var data = ret.data.data.list
							if (data == "") {
								uni.showToast({
									title: "已经最新",
									icon: "none",
								})
								this.refreshing = false;
								uni.stopPullDownRefresh();
								return;
							}
							if (this.refreshing) {
								this.refreshing = false;
								uni.stopPullDownRefresh()
								this.list = data;
								this.fetchPageNum = 2;
							} else {
								this.list = this.list.concat(data);
								this.listObj = this.list[0]
								this.fetchPageNum += 1;
							}
						}
					}
				});
			},
			goDetail(e) {
				uni.navigateTo({
					url: "../detail/detail?data=" + encodeURIComponent(JSON.stringify(e))
				})
			},
			collect(e){
				uni.request({
					url: this.$serverUrl + 'collect',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token'),
						'content-type': 'application/json' //自定义请求头信息
					},
					data: {
						// tagId: this.listObj.id,
						'id': this.listObj.id,
						userId: uni.getStorageSync('userInfo').id
					},
					success: (res) => {
						var data=res.data
						uni.showLoading({
							title: data.msg
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 500);
						setTimeout(() => {
							this.getData()
						}, 1500)
					}
				});
			}
		}
	}
</script>

<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 400rpx;
	}
	.swiper-item {
		display: block;
		height: 400rpx;
		line-height: 400rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>

